<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="UTF-8">
  <title>首页</title>
<style type="text/css">
#menu {
font:20px verdana, arial, sans-serif; /* 设置文字大小和字体样式 */
}
#menu, #menu li {
list-style:none; /* 将默认的列表符号去掉 */
padding:0; /* 将默认的内边距去掉 */
margin:0; /* 将默认的外边距去掉 */
}
#menu li {
float:left; /* 往左浮动 */
}
  #menu li a {
display:block; /* 将链接设为块级元素 */
padding:8px 50px; /* 设置内边距 */
background:#3A4953; /* 设置背景色 */
color:#fff; /* 设置文字颜色 */
text-decoration:none; /* 去掉下划线 */
border-right:1px solid #000; /* 在左侧加上分隔线 */
}
#menu li a {
    display: block; /* 将链接设为块级元素 */
    width: 150px; /* 设置宽度 */
    height: 30px; /* 设置高度 */
    line-height: 30px; /* 设置行高，将行高和高度设置同一个值，可以让单行文本垂直居中 */
    text-align: center; /* 居中对齐文字 */
    background: #3A4953; /* 设置背景色 */
    color:#146C9C; /* 设置文字颜色 */
    text-decoration: none; /* 去掉下划线 */
    border-right: 1px solid #000; /* 在左侧加上分隔线 */
  }
  #menu li :hover {
background:#146C9C; /* 变换背景色 */
color:#3A4953; /* 变换文字颜色 */
}
</style>
</head>

<body>
{#<h1>首页</h1>#}
<div name="nav" >

  <ul  id="menu">
   <li>首页</li>
    <li>&nbsp;&nbsp;</li>
   <li>活动</li>
  <li>&nbsp;&nbsp;</li>
   <li>关于</li>
  <li>&nbsp;&nbsp;</li>
   <li>公司后台</li>
  <li>&nbsp;&nbsp;</li>
    {% if request.session.is_login %}
      <a href="#"><li>我的</li></a>
      <li>&nbsp;&nbsp;</li>
      <li>欢迎，{{request.session.username}}&nbsp;回家</li>
      <li>&nbsp;&nbsp;</li>
      <a href="/logout/"><li>退出</li></a>
      <li>&nbsp;&nbsp;</li>
      {% else %}
      <a href="/login/">去登陆</a>
      <li>&nbsp;&nbsp;</li>
      <a href="/register/">去注册</a>
      <li>&nbsp;&nbsp;</li>
    {% endif %}

  </ul>

</div>
</body>
</html>